<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/address_add.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="icon" href="./images/icon.png">

    <title>地址管理</title>
    <script>
        $(function () {
            /*建立模态框对象*/
            var modalBox = {};
            /*获取模态框*/
            modalBox.modal = document.getElementById("myModal");
            /*获得trigger按钮*/
            modalBox.addAddress = document.getElementById("addAddress");
            /*获得关闭按钮*/
            modalBox.closeBtn = document.getElementById("closeBtn");
            /*模态框显示*/
            modalBox.show = function () {
                console.log(this.modal);
                this.modal.style.display = "block";
            }
            /*模态框关闭*/
            modalBox.close = function () {
                this.modal.style.display = "none";
            }
            /*当用户点击模态框内容之外的区域，模态框也会关闭*/
            modalBox.outsideClick = function () {
                var modal = this.modal;
                window.onclick = function (event) {
                    if (event.target == modal) {
                        modal.style.display = "none";
                    }
                }
            }
            /*模态框初始化*/
            modalBox.init = function () {
                var that = this;
                this.addAddress.onclick = function () {
                    that.show();
                }
                this.closeBtn.onclick = function () {
                    that.close();
                }
                this.outsideClick();
            }
            modalBox.init();
            $('.btnDel').click(function () {
                if (confirm('确认要删除此地址吗？')) {
                    $(this).parent().parent().remove()
                }
            })
            $('#checkAll').click(function () {
                $('.check').prop("checked", this.checked)
            })
            $('#del').click(function () {
                if ($('.check:checked').length > 0) {
                    if (confirm('确认要删除此地址吗？')) {
                        $('.check:checked').parent().parent().remove()
                    }
                } else {
                    alert('未选中需要删除的地址')
                }
            })
            $('#setChecked').click(function () {

            })
        })
    </script>
</head>

<body>
    <iframe src="./header.html" scrolling="no" frameborder="0" width="100%" height="45px" frameborder="0"></iframe>
    <iframe src="./personalCenter.html" scrolling="no" frameborder="0" width="100%" height="70px"
        frameborder="0"></iframe>
    <div class="outer">
        <input type="checkbox" id="checkAll">全选
        <button id="addAddress">添加新地址</button>
        <div id="myModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>头部</h2>
                    <span id="closeBtn" class="close"></span>
                </div>
                <div class="modal-body">
                    <p>这是一个模态框！</p>
                    <p>喜欢就点个赞吧！</p>
                </div>
                <div class="modal-footer">
                    <h3>尾部</h3>
                </div>
            </div>
        </div>
        <button id="del">批量删除</button>
        <table border="1">
            <tr class="container_header">
                <td></td>
                <td>收货人</td>
                <td>所在地区</td>
                <td>详情地址</td>
                <td>电话</td>
                <td>操作</td>
                <td>设置</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><button class="btnDel">修改</button><button class="btnDel">删除</button></td>
                <td><button>设为默认</button></td>
            </tr>
        </table>
    </div>
    <div id="footer">
        <iframe src="footer.html" height="320px" width="100%" frameborder="0" scrolling="no"></iframe>
    </div>
</body>

</html>